<template>
  <div class="hole">
    <div v-show = '!this.$store.state.login && !this.$store.state.newLogin'>
      <h1 style="line-height :35px;
      text-align :center;
      background-color :blue;
      color :white">会员</h1>
      <!--未登录-->
      <div style="text-align: center;color: #333333;margin-top: 20px" >
        没法查看更多哦，试试登录吧~
        <router-link tag="p" to="/tologin" style="line-height: 30px;background-color: blue;border-radius: 6px;
         width: 40%;color: white;margin:20px auto" >登录</router-link>
      </div>
    </div>
    <!--已登录,是会员-->
    <div class="right-login" v-show = '(this.$store.state.login || this.$store.state.newLogin) && this.$store.state.member'>
      <h1 style="background-color: black;color: white;line-height: 30px;text-align: center">会员</h1>
      <div class="box">
        <div class="image">
          <img src="https://fuss10.elemecdn.com/1/72/3c54d8b5a9b582555bc9e97430acfpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/">
        </div>
        <div class="info">
          <p>1a1724ar14h124</p>
          <span @click="toMember">管理续费</span>
          <h6>有效期至 2019-6-12</h6>
        </div>
        <div class="money">
            <div class="left">
              <p class="lp1">可领红包（个）</p>
              <h1>4</h1>
              <p class="lp2">每个月领4个红包</p>
              <span>领取红包</span>
            </div>
            <div class="right">
              <p class="lp1">可领鼓励金（个）</p>
              <h1>19</h1>
              <p class="lp2">可兑换无门槛红包</p>
              <span>兑换红包</span>
            </div>
        </div>
      </div>
        <div class="card">
          <div class="card-info">
            <h1>会员特权</h1>
            <div class="more">
              详情<i class="el-icon-arrow-right"></i>
            </div>
        </div>
        <ul>
          <li>
            <img src="">
            <p>专享红包</p>
          </li>
          <li>
            <img src="">
            <p>鼓励金</p>
          </li>
          <li>
            <img src="">
            <p>专属折扣</p>
          </li>
          <li>
            <img src="">
            <p>专属客服</p>
          </li>
        </ul>
      </div>
    </div>
      <!--已登录,不是会员-->
      <div class="no-member" v-show = '(this.$store.state.login || this.$store.state.newLogin) && !this.$store.state.member'>
        <h1 style="line-height :35px;
      text-align :center;
      background-color :goldenrod;
      color :white">会员</h1>
        <div class="header">
          <h1>开通会员，尊享大特权</h1>
          <div class="open" @click="toMember">立即开通<span>低至￥5/月</span></div>
        </div>
        <div class="privilege">
          <div class="privilege-box">
            <ul>
              <li>
                <div class="pri-one">
                  <span class="sone">特权1</span>
                  <span class="stwo">免费得会员红包</span>
                  <p>共<i>6张</i>，可与优惠叠加使用</p>
                </div>
                <div class="pri-one-red">
                  <div class="one-left">
                    <span class="left1">￥</span>
                    <span class="left2">5</span>无门槛
                    <span class="left3">X</span>
                    <span class="left4">6</span>张
                  </div>
                  <div class="one-right">
                    会员红包
                  </div>
                </div>
              </li>
              <li>
                <div class="pri-one">
                  <span class="sone">特权2</span>
                  <span class="stwo">每购买一餐可得鼓励金</span>
                  <p>累计可获<i>40个</i>，可兑换无门槛优惠卷</p>
                </div>
                <div class="box">
                  <div class="image">
                    <img src="../../../static/image/red.png">
                  </div>
                  <div class="info">
                    <p>移动外卖通用红包</p>
                    <span>立即兑换</span>
                    <h1><i>￥</i>5</h1>
                    <i class="nai">无门槛红包</i>
                    <i style="margin-left: 68px; font-size: 8px">需5个鼓励金</i>
                  </div>
                </div>
                <div class="box">
                  <div class="image">
                    <img src="../../../static/image/red.png">
                  </div>
                  <div class="info">
                    <p>移动外卖通用红包</p>
                    <span>立即兑换</span>
                    <h1><i>￥</i>10</h1>
                    <i class="nai">无门槛红包</i>
                    <i style="margin-left: 68px; font-size: 8px">需10个鼓励金</i>
                  </div>
                </div>
              </li>
              <li>
                <div class="pri-one">
                  <span class="sone">特权3</span>
                  <span class="stwo">专属客服一对一服务</span>
                  <p>优先为您倾心服务</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    <Tabber></Tabber>
  </div>
</template>
<script>
  import Tabber from '../tabber/tabber'
  export default {
    data () {
      return {
        isMember: false
      }
    },
    components: {
      Tabber
    },
    // created: {
    //   isMenber () {
    //     this.isMember = !this.$store.state.login && !this.$store.state.member
    //   }
    // }
    methods: {
      toMember () {
        this.$router.push('/member')
      }
    }
  }
</script>
<style lang="stylus" type="text/stylus">
  @import '../../common/stylus/mixin.styl'
  .hole
    width :100%
    height :100%
    .right-login
      .box
        width :100%
        height :200px
        background-color :#000000
        margin-top :-1px
        .image
          display :inline-block
          width :60px
          height :60px
          margin-top :20px
          margin-left :20px
          img
            width :100%
            height :100%
            border-radius :5px
        .info
          padding :10px
          width :70%
          display :inline-block
          color :goldenrod
          p
            width :68%
            text-overflow :ellipsis
            white-space :nowrap
            display :inline-block
            font-weight :bold
            font-size :20px
            overflow :hidden
          span
            padding :3px 8px
            border-radius :4px
            border :1px solid goldenrod
            font-size :12px
          h6
            font-size :10px
            margin-top :10px
        .money
          width :95%
          margin :auto
          background-color :#ffe87c
          border-radius :15px
          height :200px
          overflow :hidden
          .left
          .right
            width :49%
            height :100%
            text-align :center
            color :goldenrod
            padding-top :40px
            display :inline-block
            .lp1
              font-size :14px
              font-weight :bold
              margin-bottom :15px
            h1
              font-size :40px
              border-right :1px solid rgba(7,17,27,.1)
              box-sizing :border-box
              color :goldenrod
            .lp2
              font-size :10px
              margin-top :5px
              margin-bottom :15px
            span
              padding :5px 14px
              background-color :goldenrod
              color :white
              border-radius :8px
              font-size :12px
      .card
        width :95%
        height :150px
        border-radius :10px
        box-shadow :1px 2px 3px goldenrod
        margin : 120px auto
        .card-info
          border-bottom :1px solid rgba(7,17,27,.1)
          h1
            font-size :25px
            font-weight :bold
            padding :10px
            display :inline-block
          .more
            display :inline-block
            font-size :12px
            color:#8c939d
            float :right
            line-height :40px
            i
              margin-right :10px
              margin-left :10px
        ul
          list-style :none
          margin-top :10px
          li
            float :left
            width :20%
            margin-left :4%
            text-align :center
            img
              width :100%
              height :50px
            p
              font-size :12px
              margin-top :5px
    .no-member
      width :100%
      height :100%
      background-color :goldenrod
      .header
        width :80%
        background-color :black
        height :105px
        color :goldenrod
        border-radius :20px 20px 0 0
        margin :auto
        h1
          display :inline-block
          width :54%
          margin-left :5%
          margin-top :46px
        .open
          display :inline-block
          padding :4px 8px
          background-color :gold
          color :goldenrod
          width :22%
          text-align :center
          margin-top :15px
          border-radius :6px
          span
            font-size :10px
            color :red
      .privilege
        width :100%
        height :500px
        border-radius :10px 10px 0 0
        background-color :white
        padding-bottom :80px
        .privilege-box
          width :96%
          margin :auto
          padding-top :20px
          ul
            list-style :none
            li
              padding-bottom :10px
              border-bottom :1px solid rgba(7,17,27,.1)
              margin-top :20px
              .pri-one
                width :100%
                .sone
                  padding :2px 4px
                  border-radius :4px
                  background-color :black
                  color :goldenrod
                  margin-right :10px
                .stwo
                  font-size :14px
                  font-weight :bold
                p
                  font-size :10px
                  margin-top :8px
                  margin-bottom :10px
                  color :#cccccc
                  i
                    color:red
              .pri-one-red
                width :100%
                background-color :#ffe87c
                height :100px
                line-height :100px
                border-radius :0px 100px 100px 0
                .one-left
                  width :70%
                  height :100%
                  border-left :3px solid red
                  border-bottom :3px solid red
                  border-top :3px solid red
                  box-sizing :border-box
                  display :inline-block
                  .left1
                    color:red
                  .left2
                    color:red
                    font-size :36px
                    font-weight :bold
                    margin-right :8px
                  .left3
                    color :white
                    margin-left :5px
                    margin-right :5px
                  .left4
                    font-size :24px
                    font-weight :bold
                .one-right
                  display :inline-block
              .box
                width :100%
                display :flex
                .image
                  display :inline-block
                  width :60px
                  height :60px
                  img
                    width :100%
                    height :100%
                    border-radius :5px
                .info
                  padding :10px
                  display :inline-block
                  flex :1
                  p
                    width :68%
                    text-overflow :ellipsis
                    white-space :nowrap
                    display :inline-block
                    font-weight :bold
                    overflow :hidden
                  span
                    font-size :10px
                    padding :4px 8px
                    background-color :gold
                    border-radius :5px
                  h1
                    font-size :30px
                    display :inline-block
                    color :red
                    i
                      font-size :12px
                  .nai
                    font-size :10px
                    color :#cccccc

</style>
